<template>
  <PageWrapper>
    <BasicForm class="common-form" @register="register" @submit="handleSubmit" ref="formRef">
      <template #tt-name="{ model, field, disabled }">
        <a-input v-model:value="model[field]" :disabled="disabled" placeholder="请输入名称" />
      </template>
      <template #formFooter>
        <a-button @click="handleClick">提交表单</a-button>
      </template>
      <template #formHeader>formHeader</template>
      <template #col-name="{ schema, model, field }">
        <FormItem
          :label="schema.label"
          :label-col="{
            style: {
              width: '120px',
            },
          }"
        >
          <a-input v-model:value="model[field]" placeholder="请输入名称" />
        </FormItem>
      </template>
    </BasicForm>
  </PageWrapper>
</template>
<script setup>
  import { BasicForm, useForm } from '@/components/Form';
  import { PageWrapper } from '@/components/Page';
  import { sysRoleSelect } from '@/api/sys/role';
  import { sysUserPage } from '@/api/sys/user';
  import { h, ref } from 'vue';
  import { Input, FormItem, message } from 'ant-design-vue';
  import DemoInput from './components/DemoInput.vue';
  import { add } from '@/components/Form/src/componentMap';

  const formRef = ref();
  add('DemoInput', DemoInput);
  const schemas = [
    {
      field: 'baseinfo',
      label: '基础信息',
      component: 'Divider',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'name',
      label: '名称',
      component: 'Input',
      defaultValue: '123',
      componentProps: {
        placeholder: '请输入名称',
      },
      required: true,
      slot: 'tt-name',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'name2',
      label: '名称2',
      component: 'Input',
      defaultValue: '123',
      componentProps: {
        placeholder: '请输入名称',
      },
      required: true,
      colSlot: 'col-name',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'grouptitle',
      label: '我是分组标题',
      component: 'Divider',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'sex',
      label: '性别',
      colProps: {
        span: 12,
      },
      component: 'ApiDict',
      componentProps: {
        // mode: 'multiple',
        renderType: 'RadioGroup',
        isBtn: true,
        placeholder: '请选择性别',
        code: 'sex',
      },
    },
    {
      field: 'adminType',
      label: '管理员类型',
      colProps: {
        span: 12,
      },
      component: 'ApiDict',
      defaultValue: '1',
      componentProps: {
        //mode: 'multiple',
        renderType: 'CheckboxGroup',
        isNeedConvert: true,
        placeholder: '请选择管理员类型',
        code: 'sys_user_admin_type',
      },
    },
    {
      field: 'userId',
      label: '选择用户',
      component: 'ApiSelect',
      componentProps: {
        placeholder: '请选择用户',
        resultField: 'rows',
        labelField: 'userName',
        valueField: 'id',
        api: sysUserPage,
      },
      colProps: {
        span: 8,
      },
    },
    {
      field: 'roleIds',
      label: '选择角色',
      component: 'ApiCheckboxGroup',
      componentProps: {
        mode: 'multiple',
        placeholder: '请选择角色',
        api: sysRoleSelect,
      },
      colProps: {
        span: 8,
      },
    },
    {
      field: 'phone',
      label: '手机号',
      component: 'Input',
      defaultValue: '18980989809',
      componentProps: {
        placeholder: '请输入手机号',
      },
      colProps: {
        span: 8,
      },
      //支持正则表达式pattern 和 自定义提示信息 message
      // rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }],
      dynamicRules() {
        return [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }];
      },
      render({ model, field }) {
        return h(Input, {
          placeholder: '请输入手机号',
          value: model[field],
          onChange(e) {
            model[field] = e.target.value;
          },
        });
      },
    },
    {
      field: 'remark',
      label: '备注',
      colProps: {
        span: 24,
      },
      // rulesMessageJoinLabel: false,
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入备注',
      },
      required({ values }) {
        return values.sex == 3;
      },
    },
    {
      field: 'demoInput',
      label: '局部注册催件',
      colProps: {
        span: 24,
      },
      component: 'DemoInput',
      componentProps: {
        placeholder: '请输入',
      },
    },
    {
      field: 'date',
      label: '日期区间',
      subLabel: 'subLabel',
      labelWidth: '140px',
      helpMessage: ['提示信息1', '提示信息2'],
      helpComponentProps: {
        color: 'red',
        // trigger: 'click',
        showIndex: true,
      },
      colProps: {
        span: 24,
      },
      component: 'RangePicker',
      componentProps: {},
    },
    {
      field: 'mode',
      label: '选择模式',
      colProps: {
        span: 24,
      },
      component: 'Select',
      componentProps: {
        options: [
          {
            label: 'iconify',
            value: 'iconify',
          },
          {
            label: 'svg',
            value: 'svg',
          },
        ],
      },
    },
    {
      field: 'icon',
      label: '图标',
      colProps: {
        span: 24,
      },
      component: 'IconPicker',
      componentProps: {
        mode: 'iconify',
      },
      ifShow({ values }) {
        return values.mode != 'svg';
      },
    },
    {
      field: 'icon',
      label: '图标',
      colProps: {
        span: 24,
      },
      component: 'IconPicker',
      componentProps: {
        mode: 'svg',
      },
      ifShow({ values }) {
        return values.mode == 'svg';
      },
    },
  ];
  const [register, { resetFields, updateSchema }] = useForm({
    schemas: schemas,
    labelWidth: '120px',
    // disabled: true,
    submitButtonOptions: {
      text: '提交',
    },
    showActionButtonGroup: false,
    fieldMapToTime: [['date', ['startDate', 'endDate'], 'YYYY-MM-DD']],
  });
  const handleSubmit = (values) => {
    console.log(values);
  };
  const handleClick = () => {
    updateSchema({ field: 'name', componentProps: { disabled: true } });
    updateSchema({ field: 'sex', componentProps: { disabled: true } });

    formRef.value
      .validate()
      .then((values) => {
        console.log(values);
        message.success('校验成功');
        resetFields();
      })
      .catch(() => {
        message.error('校验失败');
      });
  };
</script>
<style scoped lang="less">
  @import '@/assets/styles/common-form.less';
</style>
